<template>
  <div class="container">
    <!-- 顶部控制（彩色设计，不打印） -->
    <div class="button-group" ref="controls">
      <!-- 打印类型单选 -->
      <label class="radio-label">
        <input type="radio" value="cn-en" v-model="printType" class="radio-input">
        <span class="radio-text">中英文</span>
      </label>
      <label class="radio-label">
        <input type="radio" value="en" v-model="printType" class="radio-input">
        <span class="radio-text">英文</span>
      </label>
      <label class="radio-label">
        <input type="radio" value="cn" v-model="printType" class="radio-input">
        <span class="radio-text">中文</span>
      </label>

      <!-- 复选框 -->
      <label class="checkbox-label">
        <input v-model="showPhonetic" type="checkbox" class="checkbox-input">
        <span class="checkbox-text">音标</span>
      </label>

      <label class="checkbox-label">
        <input v-model="showFourLineGrid" type="checkbox" class="checkbox-input">
        <span class="checkbox-text">四线三格</span>
      </label>

      <label v-if="$route.query.antiForgetId" class="checkbox-label">
        <input v-model="justForgetWord" type="checkbox" class="checkbox-input">
        <span class="checkbox-text">仅显示遗忘单词</span>
      </label>

      <label class="checkbox-label">
        <input v-model="showForget" type="checkbox" class="checkbox-input">
        <span class="checkbox-text">显示21天抗遗忘</span>
      </label>

      <label v-if="!justForgetWord" class="checkbox-label">
        <input v-model="canKnowWord" type="checkbox" class="checkbox-input">
        <span class="checkbox-text">屏蔽认识单词</span>
      </label>

      <!-- 功能按钮 -->
      <!--      <button @click="exportWord" class="btn export-btn">导出 Word 文档（可编辑修改）</button>-->
      <button class="btn print-btn" @click="onlinePrint">在线打印</button>
    </div>

    <!-- 打印内容 -->
    <div ref="printArea" class="print-content">
      <!-- 用户信息 & 打印时间 -->
      <div class="print-info">
        <div>用户：{{ user.name }}</div>
        <div>词库：{{ user.wordLibrary }}</div>
        <div>上课时间：{{ user.classTime }}</div>
        <div>打印时间：{{ printTime }}</div>
      </div>

      <!-- 单词表格 -->
      <table class="word-table" border="1" cellspacing="0" cellpadding="8">
        <tr>
          <th>{{ firstColumnTitle }}</th>
          <th v-if="showPhonetic">音标</th>
          <th>{{ secondColumnTitle }}</th>
          <th>{{ firstColumnTitle }}</th>
          <th v-if="showPhonetic">音标</th>
          <th>{{ secondColumnTitle }}</th>
        </tr>
        <tr v-for="(rowWords, rowIndex) in wordRows" :key="rowIndex" class="word-row">
          <td class="word-cell">{{ firstColumnData(rowWords[0]) }}</td>
          <!--          <td v-if="showPhonetic" class="phonetic-cell">{{ rowWords[0].phonetic || '' }}</td>-->
          <td v-if="showPhonetic" class="phonetic-cell"><span v-html="rowWords[0].phonetic"></span></td>
          <td class="word-cell">
      <span v-if="!(printType === 'cn' && secondColumnTitle === '单词')">
        {{ secondColumnData(rowWords[0]) }}
      </span>
          </td>

          <td v-if="rowWords[1]" class="word-cell">{{ firstColumnData(rowWords[1]) }}</td>
          <!--          <td v-if="showPhonetic && rowWords[1]" class="phonetic-cell">{{ rowWords[1].phonetic || '' }}</td>-->
          <td v-if="showPhonetic && rowWords[1]" class="phonetic-cell"><span v-html="rowWords[1].phonetic"></span></td>
          <td v-if="rowWords[1]" class="word-cell">
      <span v-if="!(printType === 'cn' && secondColumnTitle === '单词')">
        {{ secondColumnData(rowWords[1]) }}
      </span>
          </td>
        </tr>
      </table>

      <!-- 复习计划表格 -->
      <table v-if="showForget" class="review-table" border="1" cellspacing="0" cellpadding="8">
        <tr>
          <th>第几天</th>
          <th v-for="day in review" :key="day">{{ day.day }}</th>
        </tr>
        <tr>
          <th>复习日期</th>
          <td v-for="date in review" :key="date">{{ date.date }}</td>
        </tr>
        <tr>
          <th>遗忘词数</th>
          <td v-for="n in review" :key="n">{{ n.forgetCount }}</td>
        </tr>
      </table>

      <!-- 四线三格 -->
      <div v-if="showFourLineGrid">
        <FourLineGrid v-for="(word, index) in words" :key="index"/>
      </div>

    </div>
  </div>
</template>

<script>
import FourLineGrid from '@/views/course/classHistory/component/FourLineGrid.vue'
import { courseAfter } from '@/api/wordSystemCourse'
import DateFormatUtil from '@/utils/DateFormatUtil'
import { getForgetWordLibTypeWordId } from '@/api/antiForget'

export default {
  name: 'WordReviewPrint',
  components: { FourLineGrid },
  data() {
    return {
      showPhonetic: false,
      showFourLineGrid: false,
      showForget: true,
      justForgetWord: false,
      canKnowWord: true,
      printType: 'cn-en',
      words: [],
      wordsBackup: [],
      justForgetWordArray: [],
      review: [],
      user: { name: '', wordLibrary: '', classTime: '' },
      printTime: DateFormatUtil.formatDateTime(new Date())
    }
  },
  computed: {
    firstColumnTitle() {
      return this.printType === 'cn' ? '中文' : '单词'
    },
    secondColumnTitle() {
      if (this.printType === 'cn') return '单词'
      return '中文'
    },
    // 将 words 按两个一组拆分成二维数组
    wordRows() {
      const rows = []
      for (let i = 0; i < this.words.length; i += 2) {
        rows.push(this.words.slice(i, i + 2))
      }
      return rows
    }
  },
  watch: {
    'canKnowWord'(val) {
      if (val) {
        this.words = this.wordsBackup.filter(word => word.knowNoStudy === '0')
      } else {
        this.words = this.wordsBackup
      }
    },
    'justForgetWord'(val) {
      if (val) {
        this.words = this.justForgetWordArray
      } else {
        if (this.canKnowWord) {
          this.words = this.wordsBackup.filter(word => word.knowNoStudy === '0')
        } else {
          this.words = this.wordsBackup
        }
      }
    }
  },
  created() {
    this.loadData()
  },
  methods: {
    async loadData() {
      const res = await courseAfter({ cid: this.$route.query.cid })
      this.user.name = res.studentName
      this.user.wordLibrary = res.bookName
      this.user.classTime = res.actualStartTime

      let res2 = []
      if (this.$route.query.antiForgetId) {
        res2 = await getForgetWordLibTypeWordId({ antiForgetId: this.$route.query.antiForgetId })
        if (res2 && res2.length > 0) {
          this.justForgetWord = true
        }
      }

      this.words = []
      res.studyWordList.forEach(word => {
        this.words.push({
          en: word.fullSpell || word.wordFullSpell,
          cn: word.wordMeaning,
          phonetic: (word.phoneticAm ? `美：${word.phoneticAm}<br/>` : ' ') + (word.phoneticBr ? `英：${word.phoneticBr}` : ' '),
          state: word.state,
          knowNoStudy: word.knowNoStudy,
          libraryTypeWordId: word.libraryTypeWordId
        })
      })
      this.wordsBackup = this.words
      this.words = []
      this.wordsBackup.forEach(word => {
        if (word.knowNoStudy === '0') {
          this.words.push(word)
        }
      })

      if (this.justForgetWord) {
        this.words = []
        this.justForgetWordArray = []
        res2.forEach(libTypeWordId => {
          this.wordsBackup.forEach(word => {
            console.log(word.libraryTypeWordId, libTypeWordId, word.libraryTypeWordId === libTypeWordId)
            if (word.libraryTypeWordId === libTypeWordId) {
              this.words.push(word)
            }
          })
        })
        this.justForgetWordArray = this.words
      }

      this.review = []
      res.antiForgetList.forEach(item => {
        this.review.push({
          day: item.name.replace('抗遗忘', ''),
          date: item.antiDate.substring(0, 10),
          forgetCount: item.forgetWordNum === '-1' ? '' : item.forgetWordNum
        })
      })
    },
    firstColumnData(word) {
      return this.printType === 'cn' ? word.cn : word.en
    },
    secondColumnData(word) {
      if (this.printType === 'cn') return word.en
      if (this.printType === 'en') return ''
      return word.cn
    },
    exportWord() {
      alert('导出 Word 功能正在研发中...')
    },
    onlinePrint() {
      window.print()
    }
  }
}
</script>

<style scoped>
/* 全局基础样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Microsoft YaHei', 'Arial', sans-serif;
}

.container {
  margin: 0 auto;
  padding: 30px 20px;
  background-color: #f9fafb;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

/* 顶部控制区 */
.button-group {
  margin-bottom: 25px;
  padding: 18px 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}

/* 单选框 */
.radio-label {
  display: inline-flex;
  align-items: center;
  margin-right: 22px;
  cursor: pointer;
  gap: 6px;
  font-size: 14px;
  color: #333;
  transition: color 0.2s ease;
}

.radio-input {
  appearance: none;
  width: 16px;
  height: 16px;
  border: 2px solid #4285f4;
  border-radius: 50%;
  position: relative;
  transition: all 0.2s ease;
}

.radio-input:checked {
  background-color: #4285f4;
}

.radio-input:checked::after {
  content: '';
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #fff;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.radio-input:checked + .radio-text {
  color: #4285f4;
  font-weight: 500;
}

/* 复选框 */
.checkbox-label {
  display: inline-flex;
  align-items: center;
  margin-right: 22px;
  cursor: pointer;
  gap: 6px;
  font-size: 14px;
  color: #333;
  transition: color 0.2s ease;
}

.checkbox-input {
  appearance: none;
  width: 16px;
  height: 16px;
  border: 2px solid #34a853;
  border-radius: 4px;
  position: relative;
  transition: all 0.2s ease;
}

.checkbox-input:checked {
  background-color: #34a853;
}

.checkbox-input:checked::after {
  content: '✓';
  position: absolute;
  color: #fff;
  font-size: 12px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.checkbox-input:checked + .checkbox-text {
  color: #34a853;
  font-weight: 500;
}

/* 按钮 */
.btn {
  padding: 9px 18px;
  margin-right: 12px;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  color: #fff;
}

.export-btn {
  background-color: #4285f4;
}

.export-btn:hover {
  background-color: #3367d6;
  box-shadow: 0 2px 6px rgba(66, 133, 244, 0.3);
}

.print-btn {
  background-color: #34a853;
}

.print-btn:hover {
  background-color: #2d9749;
  box-shadow: 0 2px 6px rgba(52, 168, 83, 0.3);
}

/* 打印内容区 */
.print-content {
  background-color: #fff;
  padding: 25px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  print-color-adjust: none;
  -webkit-print-color-adjust: none;
}

/* 单词表格 */
.word-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 25px;
  font-size: 14px;
  table-layout: fixed;
}

.word-table th {
  background-color: #f5f5f5;
  font-weight: 600;
  color: #333;
  height: 50px;
}

.word-row:nth-child(even) {
  background-color: #fafafa;
}

.word-cell, .phonetic-cell {
  padding: 10px 8px;
  transition: background-color 0.2s ease;
}

.word-cell:hover, .phonetic-cell:hover {
  background-color: #f0f0f0;
}

/* 复习表格 */
.review-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
  font-size: 13px;
  table-layout: fixed;
}

.review-table th {
  background-color: #f5f5f5;
  font-weight: 600;
  color: #333;
  height: 50px;
}

.review-table th,
.review-table td {
  border: 1px solid #000;
  text-align: center;
  padding: 8px;
  height: 40px;
  width: 8.333%;
  word-wrap: break-word;
  word-break: break-all;
}

/* 用户信息 */
.print-info {
  display: flex;
  justify-content: flex-start;
  gap: 40px;
  margin-bottom: 20px;
  font-size: 14px;
  font-weight: 500;
}

* {
  user-select: none;
}

/* 打印样式 */
@media print {
  body {
    width: 100%;
    background-color: #fff;
    padding: 0;
    margin: 0;
  }

  .container {
    padding: 0;
    box-shadow: none;
    background-color: #fff;
  }

  .button-group {
    display: none !important;
  }

  table {
    page-break-inside: avoid;
  }

  tr {
    page-break-inside: avoid;
  }

  .print-content {
    background-color: transparent !important;
  }

  @page {
    /*size: portrait;*/
    margin: 10mm;
  }
}
</style>
